<template>
 <div class="box">
  <div class="chooseCoin">
   <ul>
    <li v-for="(item, index) of tabs" :key="index" :class="currency === item.coinCode ? 'active' : ''" @click="onChange(item.coinCode)">{{ item.coinCode }}</li>
   </ul>
   <p>{{ $t('user.common.currency') }}</p>
  </div>

  <b-t-c :load="loading" :active="currency" :data="tabs"></b-t-c>
 </div>
</template>

<script>
import BTC from "@/views/User/Withdrawal/Recharge/Address/Address";

export default {
 name: "Recharge",
 props: ['tabs', 'active', 'load'],
 components: {
  BTC
 },
 data: () => ({
  currency: null,
  loading: true
 }),
 methods: {
  // 选中货币
  onChange (e) {
   this.currency = e;
  }
 },
 watch: {
  load (a, b) {
   this.loading = a;
  },
  active (a, b) {
   this.currency = a;
  }
 }
}
</script>

<style scoped lang="scss">
.box {
 display: flex;
 flex-direction: column;
 padding: 30px 0;

 .chooseCoin {
  display: flex;
  align-items: center;

  ul {
   display: flex;
   align-items: center;

   li {
    cursor: pointer;
    margin-right: 15px;
    padding: 5px 30px;
    border-radius: 100px;
    border: 1px solid #D4D4D4;
    font-size: 14px;
    color: #a1a5b3;
    transition: .3s;

    &.active {
     border: 1px solid #396FB5;
     background: #396FB5;
     color: #fff;
    }

    &:hover {
     border: 1px solid #396FB5;
     background: #396FB5;
     color: #fff;
     transition: .3s;
    }
   }
  }

  p {
   font-size: 12px;
   padding-left: 20px;
   color: #b3bdc7;
   font-weight: bold;
  }
 }
}
</style>
